export class Rendering{

    constructor(component){
        this.renderHTML();
        this.onEvents();
    }

    renderHTML(){
        document.querySelector(".content").innerHTML = `
            <div class="essay-menu">
                <div class="container">
                    <label>请选择图像：</label>
                    <input type="file" id="file_input"/>
                </div>
                <input placeholder="请输入标题" type="text" class="find-title"><br><br>
                <textarea rows="33" cols="125" placeholder="请输入内容" style="font-size: 17px;width: 100%;"></textarea>                
            </div>          
        `
    }

    onEvents(){
        let input = document.getElementById("file_input");
        let result,div;

        if(typeof FileReader==='undefined'){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
        function readFile() {
            for (let i = 0; i < this.files.length; i++) {
                if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {　　//判断上传文件格式
                    return alert("上传的图片格式不正确，请重新选择")
                }
                let reader = new FileReader();
                reader.readAsDataURL(this.files[i]);
                reader.onload = function (e) {
                    result = '<div id="result"><img src="' + this.result + '" alt=""/></div>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.querySelector('.container').innerHTML = div.innerHTML;  　　//插入dom树                      <br>　　　　　　　　　　}
                }
            }
        }
    }
}